<template>
  <div>
    <h1>数据列表</h1>
    <ul>
      <li>名字带小，年龄20+</li>
      <li v-for="item in listData" :key="item.id">
        {{ item.id }} - {{ item.name }} - {{ item.age }}
      </li>
    </ul>
    <ul>
      <li>王姓</li>
      <li v-for="item in listData2" :key="item.id">
        {{ item.id }} - {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      listData: [],
      listData2: []
    };
  },
  onLoad() {
    this.fetchListData(); // 在页面加载时调用接口
  },
  methods: {
    fetchListData() {
      // this.$modal.confirm("要加载吗？").then(() => {
      //   this.$modal.msg("加载开始")
      // })
      this.$modal.loading("加载中，请耐心等待...")

      request({
        url: '/data/backend/s/test/0-2',
        headers: {
          isToken: true
        },
        // method: 'post',
        params: {'name':"%小%",'age':'>=10'}   //支持防sql注入！
      }).then(res => {

        this.$modal.closeLoading()
        // this.$modal.msgError("加载完成")
        this.listData = res;
        console.log(this.listData)
      });


      request({
        url: '/data/backend/s/test/-',
        headers: {
          isToken: true
        },
        params: {'name':"王%",'id':'>1','age':'1-100'}
      }).then(res => {
        this.listData2 = res;
      });
    }
  }
};


</script>

<style scoped>
/* 样式与之前相同 */
ul {
  list-style-type: none;
  padding: 0;
}

li {
  background-color: #f9f9f9;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ddd;
}

li:hover {
  background-color: #eee;
}
</style>